<template>
  <div class="detail">
    <div class="detail-header">
      <van-icon name="arrow-left" @click="()=>{this.$router.push('/home/room')}" />
      <h3>{{detail.community}}</h3>
      <van-icon name="share-o" />
    </div>
    <div class="detail-mains">
      <div class="detail_img">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in detail.houseImg" :key="index">
            <img :src="'http://47.102.145.189:8009'+item" alt />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="detail-title">
        <span>{{detail.title}}</span>
      </div>

      <div class="detail-house">
        <ul>
          <li v-for="(item,ind) in detail.tags" :key="ind">{{item}}</li>
        </ul>

        <div class="detail-felxbox">
          <span>
            <p class="felxbox">{{detail.price}}/月</p>
            <p class="word">租金</p>
          </span>
          <span>
            <p class="felxbox">{{detail.roomType}}</p>
            <p class="word">房型</p>
          </span>
          <span>
            <p class="felxbox">{{detail.size}}平米</p>
            <p class="word">面积</p>
          </span>
        </div>

        <div class="detail-type">
          <span v-for="(item,ind) in detail.oriented" :key="ind">
            <p class="word">装修：</p>
            <p class="titles">精装</p>
            <p class="word">朝向：</p>
            <p class="titles">{{item}}</p>
          </span>
          <span>
            <p class="word">楼层：</p>
            <p class="titles">24</p>
            <p class="word">类型：</p>
            <p class="titles">普通住宅</p>
          </span>
        </div>

        <div class="map-content">
          <div class="map-header">
            <span>
              小区:
              <p>{{detail.community}}</p>
            </span>
          </div>
          <div id="container"></div>
        </div>

        <div class="detail-mating">
          <div class="mating-header">
            <span>房屋配置</span>
          </div>
          <div class="mating-content">
            <van-grid :column-num="5" :border="false">
              <van-grid-item v-for="(v,i) in icons" :key="i" :icon="v.icon" :text="v.title" />
            </van-grid>
          </div>
        </div>

        <div class="general">
          <p>房源概况</p>
          <div>
            <div class="info">
              <dl>
                <dt>
                  <img src="https://api-haoke-web.itheima.net/img/avatar.png" alt />
                </dt>
                <dd>
                  <p>王女士</p>
                  <p class="iconP">
                    <van-icon name="certificate" />
                    <span>已认证房租</span>
                  </p>
                </dd>
              </dl>
              <van-button plain hairline type="primary" size="small">发消息</van-button>
            </div>
            <div>{{detail.description}}</div>
          </div>
        </div>

        <div class="detail-like">
          <div class="mating-header">
            <span>猜你喜欢</span>
          </div>

          <div class="message-main">
            <div v-for="(item,ind) in message" :key="ind">
              <dl>
                <dt>
                  <img :src="'http://47.102.145.189:8009'+item.imgSrc" alt />
                </dt>
                <dd>
                  <p>{{item.title}}</p>
                  <p class="datas">
                    <span>{{item.from}}</span>
                    <span>{{item.date}}</span>
                  </p>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-footer">
      <button class="detail-icon" @click="collect">
        <van-icon name="star-o" ref="col" />
        <span>{{collect1===true?"已收藏":'收藏'}}</span>
      </button>
      <button>在线咨询</button>
      <button class="icon3">电话预约</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      detail: [],
      list: [],
      icons: [],
      message: [],
      collect1: false
    };
  },
  computed: {
    ...mapState(["areaList"])
  },
  mounted() {
    this.$http.get(`/houses/${this.$route.query.id}`).then(res => {
      console.log(res);
      this.detail = res.data.body;
      console.log(this.detail);
      let icon = [
        {
          title: "衣柜",
          icon: "shop-o"
        },
        {
          title: "洗衣机",
          icon: "tosend"
        },
        {
          title: "空调",
          icon: "other-pay"
        },
        {
          title: "天然气",
          icon: "fire-o"
        },
        {
          title: "冰箱",
          icon: "completed"
        },
        {
          title: "暖气",
          icon: "hotel-o"
        },
        {
          title: "电视",
          icon: "tv-o"
        },
        {
          title: "热水器",
          icon: "cluster-o"
        },
        {
          title: "宽带",
          icon: "bar-chart-o"
        },
        {
          title: "沙发",
          icon: "desktop-o"
        }
      ];
      let filterIcon = this.detail.supporting.map(v => {
        return icon.filter(item => {
          return item.title === v;
        });
      });
      var filterIcon2 = [].concat.apply([], filterIcon);
      this.icons = filterIcon2;
      let { BMapGL } = window;
      var map = new BMapGL.Map("container");
      map.centerAndZoom(
        new BMapGL.Point(
          res.data.body.coord.longitude,
          res.data.body.coord.latitude
        ),
        18
      );
      map.enableScrollWheelZoom(true);
      var opts = {
        position: new BMapGL.Point(
          res.data.body.coord.longitude,
          res.data.body.coord.latitude
        ) // 指定文本标注所在的地理位置
      };
      // 创建文本标注对象
      var label = new BMapGL.Label(res.data.body.community, opts);
      // 自定义文本标注样式
      label.setStyle({
        color: "white",
        borderRadius: "5px",
        background: "red",
        padding: "10px",
        fontSize: "16px",
        width: "auto",
        height: "50px",
        borderRadius: "10px",
        lineHeight: "30px",
        fontFamily: "微软雅黑"
      });
      map.addOverlay(label);
    });
  },
  methods: {
    async news() {
      let res = await this.$http.get("/home/news");
      console.log(res);
      this.message = res.data.body;
    },
    collect() {
      this.collect1 = !this.collect1;
      this.$refs.col.classList.toggle("active");
    }
  },
  created() {
    this.news();
  }
};
</script>

<style>
.detail {
  width: 100%;
  height: 100%;
}
.detail-header {
  width: 100%;
  height: 8%;
  background: #21b97a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}
.detail-header h3 {
  font-size: 16px;
  font-weight: normal;
  color: #ffffff;
}
.detail-header i {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #ffffff;
}
.detail_img {
  width: 100%;
  height: 212px;
}
.van-swipe {
  height: 212px;
}
.van-swipe__indicators i {
  background: #999999;
}
.van-swipe img {
  width: 100%;
  height: 212px;
}
.detail-title {
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 16px;
}
.detail-house {
  height: 256px;
}
.detail-house > ul {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  margin: 0 10px;
}
.detail-house > ul li {
  font-size: 10px;
  width: 55px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background: #e1f5f8;
  color: #39becd;
  margin: 0 10px;
}
.detail-felxbox {
  height: 84px;
  border-bottom: 1px solid #cccccc;
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0 50px; */
}
.detail-felxbox span p {
  width: 109.67px;
  height: 26px;
  text-align: center;
}
.detail-felxbox .word {
  font-size: 10px;
  color: #999999;
}
.detail-felxbox .felxbox {
  font-weight: bold;
  color: #fa5741;
}
#container {
  width: 100%;
  height: 200px;
}
.detail-type {
  height: 84px;
  border-bottom: 1px solid #cccccc;
  margin: 0 10px;
}
.detail-type span {
  display: flex;
  line-height: 55px;
  padding: 0 20px;
}
.detail-type span p {
  width: 168.5px;
  height: 26px;
}
.detail-type .word {
  color: #999999;
  font-size: 10px;
}
.detail-type .titles {
  font-size: 15px;
}
.map-header {
  height: 44px;
  line-height: 44px;
  padding-left: 20px;
}
.map-header span {
  display: flex;
  font-size: 15px;
  color: #666666;
}
.map-header span p {
  font-size: 10px;
  padding-left: 10px;
  color: #000;
}
.mating-header {
  height: 44px;
  line-height: 44px;
  padding-left: 10px;
  font-size: 15px;
  border-bottom: 1px solid #cccccc;
  margin: 0 10px;
}
.general > p {
  height: 44px;
  line-height: 44px;
  padding-left: 10px;
  font-size: 15px;
  border-bottom: 1px solid #cccccc;
  margin: 0 10px;
}
.general {
  width: 100%;
  padding: 0 10px;
  background: #ffffff;
}
.general > div button {
  width: 74px;
  height: 29px;
}
.general > div > div {
  padding-bottom: 10px;
}
.info {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.info dl {
  display: flex;
  flex: 1;
}
.info dl dd {
  margin-left: 15px;
}
.info p {
  font-size: 15px;
}
.iconP {
  font-size: 12px;
  color: #fa5741;
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.iconP span {
  margin-left: 5px;
}
.iconP i {
  font-size: 16px;
}
.general img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.message-main {
  width: 100%;
  height: 395px;
  padding: 5px 20px;
}
.message-main dl {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  padding: 15px 10px 15px 0;
  border-bottom: 1px solid #cccccc;
}
.message-main dl dt img {
  width: 120px;
  height: 90px;
}
.message-main dl dd {
  padding-left: 10px;
  font-size: 14px;
}
.message-main dl dd p {
  font-weight: bold;
  margin-bottom: 30px;
}
.message-main .datas {
  font-size: 14px;
  font-weight: normal;
  display: flex;
  justify-content: space-between;
}
.detail-icon button {
  display: flex;
}
.detail-mains {
  height: 84%;
  overflow: scroll;
}
.detail-footer {
  height: 8%;
}
.detail-footer button {
  width: 138px;
  height: 58.8px;
  border: none;
  border: 1px solid #e6e5e5;
  background: #ffffff;
  color: #666666;
  font-size: 15px;
}
.detail-footer .active {
  color: red;
}
.detail-footer .icon3 {
  background: #21b97a;
  color: #ffffff;
}
</style>